<template>
  <el-dialog title="标签设置" :visible.sync="tagsDialogVisible" width="50%">
    <div v-for="tag in parseTagsList" :key="tag.id" class="tag-div">
      <el-checkbox v-model="tag.isChecked"></el-checkbox>
      <span @click="tag.isChecked=!tag.isChecked">{{tag.displayname}}</span>
      <el-popover placement="top" width="160" trigger="click">
        <p>确定删除此标签吗？</p>
        <el-button type="primary" size="mini" @click="delTag(tag)">确定</el-button>
        <span class="x" title="删除" slot="reference">x</span>
      </el-popover>
    </div>
    <el-popover placement="top" width="200" trigger="click" @show="addTagName = ''" v-model="addtagspopover">
      <el-input placeholder="请输入标签名" size="small" v-model="addTagName"></el-input>
      <el-button type="primary" size="mini" style="margin-top:5px" @click="addTags">确 定</el-button>
      <el-button slot="reference" class="tag-div" plain type="primary">+ 添加标签</el-button>
    </el-popover>
    <div class="clear"></div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="tagsDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="markTags">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import {
    delTags,
    tagsSaveOrUpdate
} from '@/api/search'
export default {
    data () {
        return {
            addtagspopover: false,
            addTagName: '',
            tagsDialogVisible: false
        }
    },
    props: {
        parseTagsList: Array
    },
    computed: {
        tagsCheckedList: {
            get: function () {
                let a = []
                this.parseTagsList.forEach(item => {
                    if (item.isChecked) a.push(item.displayname)
                })
                return a
            },
            set: function () {}
        }
    },
    watch: {},
    methods: {
        // 添加标签
        addTags () {
            tagsSaveOrUpdate({
                displayname: this.addTagName
            }).then(response => {
                this.$message(response.msg)
                this.$emit('getTags')
                this.addtagspopover = false
            })
        },
        // 打标签
        markTags () {
            this.$emit('markTags', this.tagsCheckedList)
        },
        // 删除
        delTag (tag) {
            delTags(tag.id).then(response => {
                this.$message(response.msg)
                this.$emit('getTags')
            })
        }
    }
}
</script>

<style lang="less" scoped>
.tag-div {
  float: left;
  margin-right: 25px;
  margin-top: 10px;
  border: 1px solid #e1e1e1;
  padding: 5px 5px 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  .x {
    font-size: 14px;
    color: #999;
    vertical-align: super;
    opacity: 0;
    margin-left: 3px;
  }
}
.tag-div:hover .x {
  opacity: 1;
}
.x:hover {
  font-weight: bold;
  color: #777;
}
</style>
